<template>
  <div class="table">
    <el-table :data="tableData" style="width: 100%" :border="true">
      <el-table-column
        v-for="item in headList"
        :key="item.id"
        :label="item.label"
        :prop="item.prop"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope)">编辑</el-button>
          <el-button size="mini" type="danger" @click="open(scope)"
            >注销</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      tableData: []
    }
  },
  props: {
    tableList: {
      required: true,
      type: Array
    },
    headList: {
      type: Array
    },
    type: {
      type: String
    }
  },
  watch: {
    tableList (value) {
      this.tableData = value
    }
  },
  created () {
    this.tableData = this.tableList
  },
  methods: {
    ...mapActions('cinema', ['changeIsAdd']),
    open (scope) {
      if (this.type === 'user') {
        // 用户
        this.$emit('deleteUserInfo', scope.row.user_id)
      }
      if (this.type === 'movie') {
        // 电影
        this.$emit('deleteMovieInfo', scope.row.movie_id)
      }
      if (this.type === 'cinema') {
        // 影院
        this.$emit('deleteCinemaInfo', scope.row.cinema_id)
      }
      if (this.type === 'hall') {
        // 影厅
        this.$emit('deleteHall', scope.row)
      }
      if (this.type === 'schedule') {
        this.$emit('deleteMovieSchedule', scope.row.schedule_id)
      }
    },
    edit (scope) {
      if (this.type === 'movie') {
        this.$store.dispatch('movie/changeIsDialog', true)
        this.$store.dispatch('movie/changeIsAdd', false)
        this.$emit('updateMovieInfo', scope.row)
      }
      if (this.type === 'cinema') {
        this.$parent.isDialog = true // 调用父亲实例对象
        this.$emit('edit', scope.row)
        this.changeIsAdd(false)
      }
      if (this.type === 'hall') {
        this.$store.dispatch('hall/changeIsDialog', true)
        this.$store.dispatch('hall/changeIsAdd', false)
        this.$emit('edit', scope.row)
      }
    }
  }
}
</script>

<style>
.table {
  margin-bottom: 20px;
}
</style>
